<template>
  <up-tabs
    :current="current"
    :list="tabs"
    :lineHeight="2"
    :activeStyle="activeStyle"
    :inactiveStyle="inactiveStyle"
    @change="change"
  ></up-tabs>
</template>

<script setup>
import { ref, toRef, watch } from 'vue';

const props = defineProps({
  tabs: {
    type: Object,
    default: () => {},
  },
  modelValue: {
    type: Number,
    default: 0,
  },
});
const emit = defineEmits(['update:modelValue']);

const current = ref(0);

const tabs = toRef(props, 'tabs');
const modelValue = toRef(props, 'modelValue');

watch(
  modelValue,
  (val) => {
    current.value = val;
  },
  {
    immediate: true,
  },
);

const change = ({ index }) => {
  emit('update:modelValue', index);
};

const activeStyle = {
  color: '#36A1EE',
  fontSize: '32rpx',
  fontWeight: '500',
  minWidth: '110rpx',
  textAlign: 'center',
};
const inactiveStyle = {
  color: '#999999',
  fontSize: '32rpx',
  fontWeight: '500',
  minWidth: '110rpx',
  textAlign: 'center',
};
</script>

<style lang="scss"></style>
